<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>京乳时鲜后台管理系统</title>
    <meta name="description" content="MilkLogisticsSystem">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="/static/assets/css/normalize.css">
    <link rel="stylesheet" href="/static/assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/assets/css/font-awesome.min.css">
    <link rel="stylesheet" href="/static/assets/css/themify-icons.css">
    <link rel="stylesheet" href="/static/assets/css/pe-icon-7-filled.css">
    <link rel="stylesheet" href="/static/assets/css/flag-icon.min.css">
    <link rel="stylesheet" href="/static/assets/css/cs-skin-elastic.css">
    <link rel="stylesheet" href="/static/assets/css/style.css">

    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800' rel='stylesheet' type='text/css'>
    <style>
        html::-webkit-scrollbar{
            display: none;
        }
    </style>

    <!-- <script type="text/javascript" src="https://cdn.jsdelivr.net/html5shiv/3.7.3/html5shiv.min.js"></script> -->
</head>
<body style="background-image: url('/static/images/background.jpg');background-size: 100%;background-repeat: no-repeat;background-attachment: fixed">

<div class="sufee-login d-flex align-content-center flex-wrap">
    <div class="container">
        <div class="login-content">
            <div class="login-logo">
                <a href="index.html">
                    <img class="align-content" src="/static/images/logo.png" alt="">
                </a>
            </div>
            <div class="login-form">
                <form id="form" method="post" enctype="multipart/form-data">
                    {% csrf_token %}
                    <div class="form-group">
                        <label>用户名</label>
                        <input type="text" class="form-control" placeholder="用户名" id="username" name="username"
                               onkeyup="username_check()" required="required">
                    </div>
                    <span id="username_warning"
                          style="color: red;font-size: 15px;display: block;margin-bottom: 5px"></span>

                    <div class="form-group">
                        <label>密码</label>
                        <input type="password" class="form-control" placeholder="密码" id="password" name="password"
                               onkeyup="check_password()" required="required">
                    </div>
                    <div class="form-group">
                        <label>确认密码</label>
                        <input type="password" class="form-control" placeholder="确认密码" id="password_check"
                               name="password_check" onkeyup="check_password()" required="required">
                    </div>
                    <span id="password_check_warning"
                          style="color: red;font-size: 15px;display: block;margin-bottom: 5px"></span>

                    <div class="form-group">
                        <label>姓名</label>
                        <input type="text" class="form-control" placeholder="姓名" id="name" name="name" required="required">
                    </div>
                    <div class="form-group">
                        <label>职位</label>
                        <input type="text" class="form-control" placeholder="职位" id="occupation" name="occupation" required="required">
                    </div>
                    <div class="form-group">
                        <label>住址</label>
                        <input type="text" class="form-control" placeholder="住址" id="address" name="address" required="required">
                    </div>
                    <div class="form-group">
                        <label>工作地点</label>
                        <input type="text" class="form-control" placeholder="工作地点" id="work_place" name="work_place" required="required">
                    </div>
                    <div class="form-group">
                        <label>电话</label>
                        <input type="tel" class="form-control" placeholder="电话" id="phone" name="phone" required="required">
                    </div>

                    <button type="submit" class="btn btn-primary btn-flat m-b-30 m-t-30" id="submit">注册</button>
                    <div class="register-link m-t-15 text-center">
                        <p style="margin-bottom: 0px;margin-top: 16px">已有账户？ <a href="{% url 'login' %}">点这里登录</a></p>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script src="/static/assets/js/vendor/jquery-2.1.4.min.js"></script>
<script src="/static/assets/js/popper.min.js"></script>
<script src="/static/assets/js/bootstrap.min.js"></script>
<script src="/static/assets/js/jquery.matchHeight.min.js"></script>
<script src="/static/assets/js/main.js"></script>

<script type="text/javascript">
    function username_check() {  // 对用户名是否已被注册进行检验
        if ($('#username').val() === '') {
            $('#username_warning').html('');
            $('#username').css('borderColor', '#ced4da');
        } else {
            $.ajax({
                url: '',
                type: "GET",
                dataType: 'json',
                data: {'username': $('#username').val()},
                progressData: false,
                async: false,
                success: function (data) {
                    if (data.result === "1") {
                        $('#username_warning').html('该用户名已注册');
                        $('#username').css('borderColor', 'red');
                        $("#submit").attr("disabled",true);
                    } else {
                        $('#username_warning').html('');
                        $('#username').css('borderColor', '#ced4da');
                        $("#submit").removeAttr("disabled");
                    }
                },
            });
        }
    }

    function check_password() {
        if ($("#password_check").val() !== "" && $("#password").val() !== $("#password_check").val()) {
            $('#password_check_warning').html('密码不一致');
            $('#password_check').css('borderColor', 'red');
            $("#submit").attr("disabled",true);
        } else {
            $('#password_check_warning').html('');
            $('#password_check').css('borderColor', '#ced4da');
            $("#submit").removeAttr("disabled");
        }
    }

</script>

</body>
</html>
